<template>
    <div id="collectAll">
        <header class="header"><router-link to='/mine?type=3' class="toreturn"><i class="el-icon-arrow-left"></i></router-link>我的粉丝<i @click="isShow" class="icon iconfont icon-sousuoleimu"></i></header>
        <scroller snappingHeight="10" class="scroller" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
            <div class="searchAble" v-if="searchAble">
                <el-input v-model="inputval" placeholder="请输入要查询的名帖"></el-input>
                <el-button type="primary" @click="toSearch">查询</el-button>
            </div>
            <div class="receiveitem" v-for="(list,indexs) in followMeLists" :key="indexs">
                <div class="userinfo">
                    <div class="cardinfo">
                        <i><img :src="decodeURIComponent(list.cheadimage)"></i>
                        <p><span>{{decodeURIComponent(list.crealname)}}</span></p>
                    </div>
                </div>
            </div>
        </scroller>
    </div>
</template>

<script>
import {followMeList} from '../../../js/dataServe.js'
import {baseUrl} from '../../../config/env.js'
export default {
    data(){
        return {
            inputval:'',
            searchAble:false,
            pageNo:1,
            followMeLists:[],
            ifocusuidArr:[],
            baseUrl:{baseUrl},
        }
    },
    components:{},
    created(){
        // this.$store.commit('changeShowit',{val:false})
    },
    mounted(){
        // this.infinite();
    },
    methods:{
        infinite(done) {

            if(sessionStorage.sid){
                let self = this;
                let responseData = followMeList(self.pageNo,self.inputval);
                responseData.then((res)=>{
                                        // alert(decodeURIComponent(res.msg))
                                        if(res.data.list && res.data.list.length>0){
                                           
                                            let items = res.data.list;
                                            // console.log(items)
                                            items.forEach( (item,key) => {
                                                    //过滤
                                                    if(this.ifocusuidArr.indexOf(item.uid) == -1){
                                                        this.ifocusuidArr.push(item.uid)
                                                        self.followMeLists.push(item)
                                                    }
                                            })
                                            self.pageNo++;
                                            done();
                                            
                                        }else{
                                            self.$refs.my_scroller.finishInfinite(2);
                                        }
                                    })
            }
        },
        refresh(done) {
            done()
        },
        isShow(){
            this.searchAble = !this.searchAble;
        },
        toSearch(){
            this.followMeLists = [];
            this.pageNo = 1;
            this.infinite()
        }
    }
}
</script>

<style scoped >
#collectAll {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
    height:100%;
}
.receiveitem{
    padding:0.5rem 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dfdfdf;
}
.userinfo{
    display:flex;
    width: 100%;
    justify-content: space-between;
}
.receiveitem i{
    width:4rem;
    height:4rem;
    display:block;
}
.receiveitem p{
    height:4rem;
    display:flex;
    padding-left: 1rem;
    align-items:center;
    justify-content: center;
}
.receiveitem i img{
    width:100%;
    height:100%;
    border-radius:5rem;
}
.operate{
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
    background:#ebeef5;
}
.operate p{
    text-align:left;
}
.operateP{
    display:flex;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: 0;
    right: 4rem;
    height: 3rem;
    align-items: center;
}
.operateDetail{
    display:flex;
    flex-direction:column;
    padding-left:1rem;
}
.operateDetail i,.operateDetail span{
    height: 1.2rem;
    line-height: 1.2rem;
}
.el-icon-arrow-right{
    position:absolute;
    right:1rem;
}
.is-active{
    background:#ebeef5;
}
.tjs,.cardinfo{
    display:flex;
    justify-content: center;
    align-items: center;
}
.tjs p{
    padding:0;
}
footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    color: #ffffff;
    height: 3rem;
    line-height: 3rem;
    background: #606266;
}
.bgr{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 49px;
    background: #ebeef5;
}
.chooseitem{
    display: flex;
    padding-left: 2rem;
}
.el-radio-group,.chooseitems{
    width:100%;
    height:6rem;
    overflow:auto;
}
.scroller{
    padding: 0 1rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 3rem;
    bottom: 0;
    height: auto !important;
}
.header{
    width:100%;
    height:3rem;
    line-height:3rem;
    background:#eee;
    color:#333;
    font-size:1.2rem;
    position: fixed;
    top: 0;
    z-index:5;
}
header a{
    position: absolute;
    left: 2%;
    color: #333;
    width: 2rem;
}
header .icon{
    position: absolute;
    right: 1rem;
    color: #333;
    width: 2rem;
    font-size:2rem;
}
.searchAble{
    display: flex;
    padding: 0.5rem 0rem;
    width: 100%;
    box-sizing: border-box;
}
</style>
